<template>
  <div class="user-interest">
    <div class="box">
      <p class="title">填写兴趣爱好</p>
      <p class="title_sub">建议多选几个感兴趣的分类</p>
      <p class="tip">你感兴趣的品类是</p>
      <ul>
        <li v-for="item in list" :key="item.id">
          <img :src="item.picture" alt="" />
          <Checkbox
            v-model="item.selected"
            shape="square"
            icon-size="14px"
            checked-color="#27ba9b"
            >{{ item.name }}</Checkbox
          >
        </li>
      </ul>
    </div>
    <div class="bottom">
      <Button @click="save()" class="button" type="primary" block>保存</Button>
    </div>
  </div>
</template>

<script>
import { Checkbox, Button, Toast } from 'vant'
export default {
  name: 'user-interest',
  components: { Checkbox, Button },
  data () {
    return {
      list: []
    }
  },
  async created () {
    await Toast.loading('正在加载')
    const { data } = await this.$http.get('/user/interest')
    this.list = data.result
    Toast.clear()
  },
  methods: {
    async save () {
      await Toast.loading('正在保存')
      await this.$http.post('/user/interest')
      await Toast.success('保存成功')
      window.setTimeout(() => {
        Toast.clear()
      }, 500)
    }
  }
}
</script>

<style scoped lang='less'>
.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: 10px;
  padding-right: 10px;
  height: 60px;
  background: #f8f8f8;
  .button {
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    margin: 10px 0;
  }
}
.user-interest {
  padding-bottom: 70px;
  .box {
    background: #fff;
    padding: 20px 12px;
    height: 530px;
    border-radius: 4px;
    .title_sub {
      font-size: 12px;
      color: #999;
      margin-top: 6px;
    }
    .tip {
      margin-top: 36px;
      text-align: center;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 12px;
      li {
        width: 30%;
        margin-right: 5%;
        margin-top: 20px;
        text-align: center;
        &:nth-child(3n) {
          margin-right: 0;
        }
        img {
          width: 80px;
          height: 80px;
        }
        .van-checkbox {
          justify-content: center;
          margin-top: 10px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
